<template>
  <div>
    <div class="stacktitle" >
        <el-select v-model="stacktype" placeholder="请选择" style="width:160px;" @change="itemchange">
          <el-option
            v-for="item in typeoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
          </el-option>
        </el-select>
    </div>
    <div ref="stack" style="background-color: #ffffff;height: 380px;border-radius:25px;"></div>
  </div>
</template>

<script>
export default {
    name:'stackdata',
    data(){
      return {
        stackdata:{
          regions:{
            title:'地区销量趋势',
            base: 310,
            unit: '万',
            data:[
              {
                name:'上海',
                data:['114.12','323.11','212.33','111.11','90.27','20.38','79.28','100.22','102.77','120.88','299.18','280.27']
              },
              {
                name:'武汉',
                data:['88.28','290.29','101.99','199.28','188.90','269.90','207.16','377.19','299.90','99.29','90.27','88.28']
              },
              {
                name:'天津',
                data:['299.90','80.17','52.29','56.90','299.28','190.87','173.27','182.56','99.16','105.28','126.97','183.28']
              },
              {
                name:'重庆',
                data:['92.19','120.87','189.29','203.47','238.78','299.01','300.17','299.26','288.17','255.34','211.69','199.85']
              }
            ]
          },
          kinds:{
            title:'商品销售趋势',
            base: 120,
            unit: '万',
            data:[
              {
                name:'牛奶',
                data:['77.18','99.17','55.08','44.73','88.18','77.05','26.38','52.91','82.16','28.18','96.27','88.26']
              },
              {
                name:'粉面',
                data:['90.17','87.88','99.16','80.25','95.26','91.27','90.87','89.68','81.25','86.64','85.88','99.17']
              },
              {
                name:'水产',
                data:['29.08','67.59','23.17','33.27','74.04','74.64','97.58','38.25','48.82','47.43','98.69','57.98']
              },
              {
                name:'果脯',
                data:['47.63','93.99','83.42','99.30','35.60','99.20','15.10','70.38','11.71','40.76','72.67','71.22']
              }
            ]
          },
          business:{
            title:'商家采购趋势',
            base: 50,
            unit: '万',
            data:[
              {
                name:'诺诺罗亚',
                data:['32.46','44.22','94.18','224.43','151.29','199.78','247.52','82.50','269.39','36.29','19.72','189.66']
              },
              {
                name:'春野本野',
                data:['62.24','185.49','69.82','284.10','173.02','13.45','108.74','194.51','294.39','60.86','105.20','76.11']
              },
              {
                name:'今日事今日毕',
                data:['15.37','55.28','136.70','102.05','144.42','111.09','148.83','89.77','155.15','227.79','102.15','74.95']
              },
              {
                name:'xuxuwoya',
                data:['289.28','229.89','60.10','134.74','42.64','273.76','188.31','111.10','276.56','164.10','180.51','280.14']
              }
            ]
          },
          month:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
        },
        stacktype:'regions',
        typeoptions:[
          {
            value:'kinds',
            label:'商品销量趋势'
          },
          {
            value:'business',
            label:'商家采购趋势'
          },
          {
            value:'regions',
            label:'地区销量趋势'
          },
        ],
        colorArr:{
          colorArr1:[
            'rgba(44, 110, 255, 0.5)',
            'rgba(11, 168, 44, 0.5)',
            'rgba(250, 105, 0, 0.5)',
            'rgba(254, 33, 30, 0.5)' 
          ],
          colorArr2:[
            'rgba(44, 110, 255 , 0)',
            'rgba(11, 168, 44 , 0)',
            'rgba(250, 105, 0 , 0)',
            'rgba(254, 33, 30 , 0)'
          ]
        }
      }
    },
    methods:{  
      itemchange(){
        this.initstack()
      },  
     initstack(){
      this.chartInstance = this.$echarts.init(this.$refs.stack)
      const initOption = {
        grid:{
          left:'3%',top:'20%',right: '5%',bottom:'6%',
          containLabel: true
        },
        tooltip:{
          trigger: 'axis'
        },
        legend:{
          left:230,top: '15%',
          icon: 'circle'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis:{
          type: 'value'
        }
      }
      this.chartInstance.setOption(initOption)
      const timeArr = this.stackdata.month
      const valueArr = this.stackdata[this.stacktype].data
      const legendArr = valueArr.map(item => {
        return item.name
      })
      const seriesArr = valueArr.map((item, index) => {
        return {
          name: item.name,
          data: item.data,
          type: 'line',
          stack: this.stacktype,
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[
              {
                offset: 0,
                color: this.colorArr.colorArr1[index]
              },
              {
                offset: 1,
                color: this.colorArr.colorArr2[index]
              }
            ])
          },
          smooth: true,
          showSymbol: false,
        }
      })
      const dataOption = {
        legend:{
          data:legendArr,
          top: '2%',
        },
        xAxis:{
          data:timeArr
        },
        series: seriesArr
      }
      this.chartInstance.setOption(dataOption)
     }
    },
    mounted(){
      this.initstack()
    }
}
</script>

<style lang="css" scoped>
.stacktitle{
  position: absolute;
  left: 110px; top: 10px;
  z-index: 10;
}
.stacktitle>>>.el-input__inner{
  background: none;
  border: 0;
  color:black;
  font-weight:800;
  font-size: 18px;
}
</style>